<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3——文本处理</title>
    <style>
        /* 文本溢出 */
        .content{
            width:30%;
            height:30px;
            line-height: 30px;
            border:1px solid #cecece;
        }
        .clip{
            text-overflow: clip;    /* 文本溢出裁切 */
            overflow: hidden;    /* 文本超出不显示 */
            white-space:nowrap;    /* 文本不换行 */
        }
        .ellipsis  {
            text-overflow: ellipsis;    /* 单行文本溢出使用省略号代替 */
            overflow: hidden;    /* 文本超出不显示 */
            white-space:nowrap;    /* 文本不换行 */
        }
        .pre  {
            height:auto;
            white-space:pre;    /* 文本以pre格式显示 */
        }
        .pre_wrap  {
            height:auto;
            white-space: pre-wrap;    /* 文本以pre格式显示，并且换行 */
        }
        .pre_line  {
            height:auto;
            white-space:pre-line;    /* 文本以pre格式显示，以每行文字进行换行 */
        }

        /* 多行文本溢出显示省略号 */
        .break_all  {
            height:auto;
            text-justify:inter-ideograph;
            text-align:justify;
            word-break:break-all;   
            position:relative;
            overflow:hidden;
        }
        /* 显示省略号 */
        .break_all::after {
            content:"…更多";
            position:absolute;
            bottom:0;
            right:6px;
            background:#fafafa;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: normal;
        }

        /* 自定义字体 */
        @font-face {    /* 兼容写法，英文 */
        font-family: "english1";
            src: url(//:) format("no404"), url("font/karlascript.woff.ttf") format("woff"), url("font/karlascript.woff.ttf") format("truetype"), url("font/karlascript.woff.ttf") format("svg");
            font-weight: normal;
            font-style: normal;
        }
        @font-face {    /* 兼容写法，中文 */
        font-family: "china1";
            src: url(//:) format("no404"), url("font/春风十里顾清欢.ttf") format("woff"), url("font/春风十里顾清欢.ttf") format("truetype"), url("font/春风十里顾清欢.ttf") format("svg");
            font-weight: normal;
            font-style: normal;
        }
        .english_one{   /* 应用英文字体 */
            font-family:'english1';
            height:auto;
            font-size:20px;
        }
        .china_one{   /* 应用中文字体 */
            font-family:'china1';
            height:auto;
            font-size:20px;
        }

        /* 文本阴影 */
        .text_shadow{
            text-shadow: 3px 3px 10px #fafcfb;
            background:#000000;
            height:auto;
            font-size:20px;
            color:#e74444;
        }
    </style>
</head>
<body>
    <h3>文本溢出裁切</h3>
    <div class="content clip">
        作为全球领先的半导体大厂，台积电近年来一直在探索更加先进的工艺制程，用以维系目前的行业领先地位，毕竟半导体行业几乎是“赢者通吃”的局面。
        同时，随着工艺制程的领先，台积电市值也一路飞涨，根据公开消息，从2020年1月以来，台积电股价飙升70%左右，市值早已冲破6000亿美元，接近7000亿美金的大关了。
    </div>
    <h3>单行文本溢出显示省略号</h3>
    <div class="content ellipsis">
        作为全球领先的半导体大厂，台积电近年来一直在探索更加先进的工艺制程，用以维系目前的行业领先地位，毕竟半导体行业几乎是“赢者通吃”的局面。
        同时，随着工艺制程的领先，台积电市值也一路飞涨，根据公开消息，从2020年1月以来，台积电股价飙升70%左右，市值早已冲破6000亿美元，接近7000亿美金的大关了。
    </div>
    <h3>文本以pre格式显示</h3>
    <div class="content pre">
        作为全球领先的半导体大厂，台积电近年来一直在探索更加先进的工艺制程，用以维系目前的行业领先地位，毕竟半导体行业几乎是“赢者通吃”的局面。
        同时，随着工艺制程的领先，台积电市值也一路飞涨，根据公开消息，从2020年1月以来，台积电股价飙升70%左右，市值早已冲破6000亿美元，接近7000亿美金的大关了。
    </div>
    <h3>文本以pre格式显示，并且换行</h3>
    <div class="content pre_wrap">
        作为全球领先的半导体大厂，台积电近年来一直在探索更加先进的工艺制程，用以维系目前的行业领先地位，毕竟半导体行业几乎是“赢者通吃”的局面。
        同时，随着工艺制程的领先，台积电市值也一路飞涨，根据公开消息，从2020年1月以来，台积电股价飙升70%左右，市值早已冲破6000亿美元，接近7000亿美金的大关了。
    </div>
    <h3>文本以pre格式显示，以每行文字进行换行</h3>
    <div class="content pre_line">
        作为全球领先的半导体大厂，台积电近年来一直在探索更加先进的工艺制程，用以维系目前的行业领先地位，毕竟半导体行业几乎是“赢者通吃”的局面。
        同时，随着工艺制程的领先，台积电市值也一路飞涨，根据公开消息，从2020年1月以来，台积电股价飙升70%左右，市值早已冲破6000亿美元，接近7000亿美金的大关了。
    </div>
    <h3>多行文本溢出显示省略号</h3>
    <div class="content break_all">
        作为全球领先的半导体大厂，台积电近年来一直在探索更加先进的工艺制程，用以维系目前的行业领先地位，毕竟半导体行业几乎是“赢者通吃”的局面。
        同时，随着工艺制程的领先，台积电市值也一路飞涨，根据公开消息，从2020年1月以来，台积电股价飙升70%左右，市值早已冲破6000亿美元，接近7000亿美金的大关了。
    </div>
    <h3>自定义字体——英文</h3>
    <div class="content english_one">
        China's economic growth is expected to equal pre-COVID-19 levels in the last quarter of 2020, and Beijing will ramp up efforts to help businesses still in distress and promote a more balanced recovery, experts said on Friday.
    </div>
    <h3>自定义字体——中文</h3>
    <div class="content china_one">
        作为全球领先的半导体大厂，台积电近年来一直在探索更加先进的工艺制程，用以维系目前的行业领先地位，毕竟半导体行业几乎是“赢者通吃”的局面。
        同时，随着工艺制程的领先，台积电市值也一路飞涨，根据公开消息，从2020年1月以来，台积电股价飙升70%左右，市值早已冲破6000亿美元，接近7000亿美金的大关了。
    </div>
    <h3>文本阴影</h3>
    <div class="content text_shadow">
        China's economic growth is expected to equal pre-COVID-19 levels in the last quarter of 2020, and Beijing will ramp up efforts to help businesses still in distress and promote a more balanced recovery, experts said on Friday.
    </div>
</body>
</html>